<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<style>
	body,h3,p{margin: 0;padding: 0;font-family: '微软雅黑';}
	img{
		border: 0;
	}
	body{
		 background-image: url('image/BG.png'); 
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
	.navbar{ 
		background: #ffffff; 
		color: #666666; 
		font-weight: normal;
		border-bottom: 1px solid #e7e7e7;
	}
	.navbar-header{
		float:none;
	}
	.navbar h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.navbar h3 span{
		font-weight: normal;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #999999;
	}	
	.navbar a{
		color: #747474;
		font-size: 20px;
		position:absolute;
		top:15px;
		left:10px;
	}
	.navbar a:focus,.navbar a:hover{
		text-decoration: none;
	}
	.foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 70px;
	}
	.foot_con{
		width: 75%;
		margin: 0 auto;
	}
	.flex_div{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}	
	.line_div{
		width: 80px;
		height: 100px;
		background: url('image/line.png') no-repeat center/80px 12px;
	}
	.foot div.Label{
		color: #fba372;
		font-size: 22px;
		width: 92px;
		height: 92px;
		border: 4px solid #fcb38b;
		border-radius: 100px;
		box-sizing: content-box;
	}
	.foot div.Label_active{
		color: #fff;
		background: #f9752b;
	}	
	.foot .Label div{
		width: 92px;
		height: 46px;
		text-align: center;
	}
	.foot .top_p{
	    display: table-cell;
	    text-align: center;
	    vertical-align: bottom;		
	}
	.foot .bottom_p{
		vertical-align: top;
	}
	.end{
		color: #bdbdbd;
		font-size: 16px;
		text-align: center;
		letter-spacing: 2px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 15px;
	}

	/* 内容 */
	.content{
		padding:0 30px;
		overflow-y: auto;
	}
	
	.page-header{
		text-align: center;
		border:0;
	}
	.form-group{
		font-size: 16px;
	}
	.form-group .num{
		float: left;
		display: inline-block;
		width:30px;
		height:30px;
		background:#eee;
		text-align: center;
		line-height: 30px;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		color: #666;
		margin-left:5px;
	}
	.form-group .num_input{
		float: left;
		width: 50%;
		border:0;
		background:#eee;
		height:30px;
		display: inline-block;
		margin-left:5px;
		padding-left: 3px;
		color: #f9752b;
	}
	.title{
		margin:10px 0;
		margin-top:20px;
		padding-left:10px;
		border-left: 2px solid #f9752b;
		color: #f9752b;
		font-size: 18px;

	}
	.color_orange{
		color: #f9752b;
	}
	.btn_group{
		text-align: center;
		margin:20px 0;
	}
	.btn_group .btn{
		display: inline-block;
		padding:10px 40px;
		background:#7189a9;
		border-radius: 200px;
		color: #fff;
		font-size: 16px;
		margin-left:15px;
	}
	.border_box{
		border:1px solid #f9752b;
		padding:15px;
		border-radius: 25px;
	}
	.tit{
		width:120px;
		height:40px;
		background: #f9752b;
		border-radius: 200px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		margin:15px 0;
	}
	.tit>span{
		display: block;
		width:36px;
		height:36px;
		border-radius: 50%;
		background:#fff;
		line-height: 36px;
		float: left;
		margin:2px 0 0 2px;
		color: #f9752b;
	}
	.small_font{
		font-size: 10px;
		color: #f9752b;
	}
	.orange_font{
		display: inline-block;
		width:50%;
		color: #f9752b;
		font-size: 20px;
	}
	.tishi{
		padding:15px;
		background: #eee;
		color: #f9752b;
		font-size: 12px;
	}
	.border_box2{
		border:1px solid #f9752b;
		padding:15px;
	}
	.line{
		width:100%;
		height:27px;
		background: url(image/line.png) repeat-x center/80px 12px;
		margin:10px 0;
	}
	.all-table{
		width: 100%;
	}
	.all-table th,.all-table td{
		text-align: center;
	}
	.all-table th{
		color: #f9752b;
		border-left: 1px solid #f9752b;
	}
	.all-table th:first-child{
		border:0;
	}
	.all-table td{
		padding:10px 2px;
	}
	.all-table .form-group{
		width:100%;
		overflow: hidden;
		border:1px solid #ccc;
		margin-bottom: 0;
		height:34px;
		border-radius: 4px;
	}
	.all-table .form-group .num{
		background:none;
		width:15%;
		margin:0;
		color: #f9752b;
	}
	.all-table .form-group .num_input{
		background: none;
		width:70%;
		margin:0;
	}
	.btn_group2{
		text-align: center;
		margin:20px 0;
	}
	.btn_group2 .btn{
		display: inline-block;
		padding:10px 40px;
		border:1px solid #666;
		border-radius: 200px;
		color: #666;
		margin-left:15px;
	}
</style>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<div class="navbar-header">
				<h3 class="text-center">招商银行<span>智能分析</span></h3>
				<a href="javascript:void(0)" onClick="javascript :history.go(-1);"
					class="glyphicon glyphicon-chevron-left"></a>
			</div>
		</div>
	</nav>
	<div class="content">
		<div class="page-header">
		    <h2>财务规划建议方案（产品组合调整）</h2>
		</div>
		<h4>IRA建议的方案：</h4>
		<form role="form">
			<div class="form-group clearfix">
			    <label class="col-sm-6">
				    <span class="pull-left">客户：</span>
				    <input class="num_input" type="text" name="">
			    </label>
			    <p class="col-sm-6">
			    	<span class="pull-left">年龄：</span>
					<span class="num minus">-</span>
					<input class="num_input" type="number" min="0" value="30" name="" style="width:20%;">
					<span class="num add">+</span>
					&nbsp;岁
			    </p>
			</div>
			<h3 class="title">需求A</h3>
			<div class="border_box2">
				<div class="clearfix">
					<div class="col-sm-6">投保人：张三</div>
				</div>
				<div class="clearfix">
					<div class="col-sm-6">被投保人：李四</div>
					<div class="col-sm-6">年龄：36岁</div>
				</div>
				<div class="line"></div>
				<table class="all-table">
					<tr>
						<th>产品名称</th>
						<th>保障金额</th>
						<th>年金领取时间</th>
						<th>缴费期限</th>
						<th>缴别</th>
						<th>保费</th>
					</tr>
					<tr>
						<td>
							<select class="form-control">
								<option>夕阳红</option>
								<option>2</option>
								<option>3</option>
							</select>
						</td>
						<td>
							<div class="form-group">
								<span class="num minus">-</span>
								<input class="num_input" type="number" min="0" value="30" name="">
								<span class="num add">+</span>
							</div>
							
						</td>
						<td>
							<select class="form-control">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>年缴</option>
								<option>2</option>
								<option>3</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>3000/年</option>
								<option>2</option>
							</select>
						</td>
					</tr>
				</table>
				<div class="btn_group2">
					<a href="#" class="btn">查看产品库资料</a>
				</div>
			</div>
			<h3 class="title">需求B</h3>
			<div class="border_box2">
				<div class="clearfix">
					<div class="col-sm-6">投保人：张三</div>
				</div>
				<div class="clearfix">
					<div class="col-sm-6">被投保人：李四</div>
					<div class="col-sm-6">年龄：36岁</div>
				</div>
				<div class="line"></div>
				<table class="all-table">
					<tr>
						<th>产品名称</th>
						<th>保障金额</th>
						<th>年金领取时间</th>
						<th>缴费期限</th>
						<th>缴别</th>
						<th>保费</th>
					</tr>
					<tr>
						<td>
							<select class="form-control">
								<option>夕阳红</option>
								<option>2</option>
								<option>3</option>
							</select>
						</td>
						<td>
							<div class="form-group">
								<span class="num minus">-</span>
								<input class="num_input" type="number" min="0" value="30" name="">
								<span class="num add">+</span>
							</div>
							
						</td>
						<td>
							<select class="form-control">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>年缴</option>
								<option>2</option>
								<option>3</option>
							</select>
						</td>
						<td>
							<select class="form-control">
								<option>3000/年</option>
								<option>2</option>
							</select>
						</td>
					</tr>
				</table>
				<div class="btn_group2">
					<a href="#" class="btn">查看产品库资料</a>
				</div>
			</div>
			<div class="btn_group">
				<button type="submit" class="btn">保存方案</button>
			</div>
		</form>
	</div>
    <div class="foot">
    	<div class="foot_con">
    		<div class="flex_div">
		     	<div class="Label">
		   			<div class="top_p">基础</div>
		   			<div class="bottom_p">信息</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定性</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定量</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label Label_active">
		   			<div class="top_p">诊断</div>
		   			<div class="bottom_p">分析</div>
		   		</div>    			
    		</div>
    	</div>
    </div>
    <p class="end">版权归信诚人寿所有</p>
</body>
<script>
	$(function(){
		//内容居中
		var _height = $(window).height();
		var give_height = _height-260;
		console.log(give_height);
		$('.content').css('height',give_height+'px');
		//加减
		$(".form-group").each(function(index,el){
			$(el).find('.minus').click(function(){
				var a = $(this).siblings('.num_input').val();
				//alert(a)
				if(a>0){
					a--;
				}
				$(this).siblings('.num_input').val(a);
			});
			$(el).find('.add').click(function(){
				var a = $(this).siblings('.num_input').val();
				//alert(a)
				a++;
				$(this).siblings('.num_input').val(a);
			});
		});
	});
</script>
</html>